<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/userbill' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="main" :style="{width: '1200px', height: '690px'}"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  export default {
    name: "demo1",
    data() {
      return {
        names: [],
        series1: [],
        series2: []
      }
    },
    mounted() {
      this.initChart();
    },
    methods: {
      initChart() {
        this.char = echarts.init(document.getElementById("main"));
        this.char.setOption({
          title: {
            text: '个人预定数据统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['订单数', '消费总数']
          },
          toolbox: {
            show: true,
            feature: {
              mark: {
                show: true
              },
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          calculable: true,
          xAxis: {
            type: 'category',
            boundaryGap: false, //取消左侧的间距
            data: []
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: false
            }, //去除网格线
            name: ''
          },
          series: [{
              name: '订单数',
              type: 'line',
              symbol: 'emptydiamond', //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
              data: []
            },
            {
              name: '消费总数',
              type: 'line',
              symbol: 'emptydiamond', //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
              data: []
            }
          ]

        });
        const usercode = window.sessionStorage.getItem('token')
        this.axios.get("http://localhost:8090/order/getOrderData/"+usercode).then(res => {
          this.names = res.data[2]
          // this.names.format("yyyy-MM-dd HH:mm:ss")
          this.series1 = res.data[0]
          this.series2 = res.data[1]
          this.char.setOption({
            xAxis: {
              data: this.names
            },
            series: [{
                data: this.series1
              },
              {
                data: this.series2
              }
            ]
          })
        });

      },
    }
  }
</script>
